<template>
  <div class="register-page min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
    <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
      <h2 class="text-2xl font-bold text-center mb-6">用户注册</h2>
      
      <form @submit.prevent="submitForm">
        <div class="mb-4">
          <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">用户名</label>
          <input
            type="text"
            id="username"
            v-model="registerForm.username"
            placeholder="请输入用户名"
            autofocus
            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
          >
        </div>
        
        <div class="mb-4">
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">邮箱</label>
          <input
            type="email"
            id="email"
            v-model="registerForm.email"
            placeholder="请输入邮箱"
            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
          >
        </div>
        
        <div class="mb-4">
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">密码</label>
          <input
            type="password"
            id="password"
            v-model="registerForm.password"
            placeholder="请输入密码"
            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
          >
        </div>
        
        <div class="mb-6">
          <label for="confirmPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">确认密码</label>
          <input
            type="password"
            id="confirmPassword"
            v-model="registerForm.confirmPassword"
            placeholder="请再次输入密码"
            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
          >
        </div>
        
        <button 
          type="submit"
          :disabled="isSubmitting"
          class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 disabled:opacity-70 disabled:cursor-not-allowed mb-6"
        >
          {{ isSubmitting ? '注册中...' : '注册' }}
        </button>
        
        <div class="text-center">
          <span class="text-gray-600 dark:text-gray-400">已有账号？</span>
          <a 
            href="/login" 
            class="text-primary hover:underline ml-1"
          >
            立即登录
          </a>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useAuthStore } from '@/store/auth'
import { RegisterRequest } from '@/types'

// 状态
const isSubmitting = ref<boolean>(false)

// 注册表单
const registerForm = reactive<RegisterRequest & { confirmPassword: string }>({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
})

// 认证store
const authStore = useAuthStore()

// 提交表单
const submitForm = async () => {
  try {
    // 简单的表单验证
    if (!registerForm.username.trim()) {
      alert('请输入用户名')
      return
    }
    if (registerForm.username.length < 3 || registerForm.username.length > 20) {
      alert('用户名长度在 3 到 20 个字符')
      return
    }
    if (!registerForm.email.trim()) {
      alert('请输入邮箱')
      return
    }
    // 简单的邮箱格式验证
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(registerForm.email)) {
      alert('请输入有效的邮箱地址')
      return
    }
    if (!registerForm.password.trim()) {
      alert('请输入密码')
      return
    }
    if (registerForm.password.length < 6 || registerForm.password.length > 20) {
      alert('密码长度在 6 到 20 个字符')
      return
    }
    if (!registerForm.confirmPassword.trim()) {
      alert('请再次输入密码')
      return
    }
    if (registerForm.password !== registerForm.confirmPassword) {
      alert('两次输入的密码不一致')
      return
    }
    
    isSubmitting.value = true
    // 移除confirmPassword字段
    const { confirmPassword, ...registerData } = registerForm
    await authStore.register(registerData)
    // 注册成功后跳转到登录页
    window.location.href = '/login'
  } catch (error) {
    console.error('注册失败:', error)
    alert('注册失败，请稍后重试')
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
.register-page {
  padding: 1rem;
}
</style>
